<script setup>
defineProps({ modelValue: String, disabled: Boolean })
defineEmits(['update:modelValue', 'send', 'plus'])
</script>

<template>
  <div class="chat-input">
    <button class="plus-btn" :disabled="disabled" @click="$emit('plus')" title="更多">+</button>
    <input class="prompt-input" :value="modelValue" :disabled="disabled" placeholder="请输入您的编程问题..."
      @input="$emit('update:modelValue', $event.target.value)" @keyup.enter="$emit('send')" />
    <button class="send-btn" :disabled="disabled || !(modelValue && modelValue.trim())"
      @click="$emit('send')">发送</button>
  </div>
</template>

<style scoped>
.chat-input {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid #e0e0e0;
}

.plus-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  background: #fff;
  color: #333;
  cursor: pointer;
}

.prompt-input {
  flex: 1;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  color: #121212;
  padding: 10px 12px;
  outline: none;
}

.prompt-input::placeholder {
  color: #999;
}

.send-btn {
  background: #000;
  color: #fff;
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
}

.send-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}
</style>
